<!--
 * Description: GCM分工维护页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/04/08 02:28
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!-- 按钮 -->
      <template slot="btn-middle">
        <el-button
          v-if="$hasPer('exportByCommodity')"
          class="btn-custom"
          icon="el-icon-download"
          :loading="isRequesting"
          plain
          size="mini"
          type="primary"
          @click="exportFileByCommodity"
        >
          {{ $t('GcmCmtyDivide.exportByCommodity') }}
        </el-button>
        <el-button
          v-if="$hasPer('exportFileByGcmOwner')"
          class="btn-custom"
          icon="el-icon-download"
          :loading="isRequesting"
          plain
          size="mini"
          type="primary"
          @click="exportFileByGcmOwner"
        >
          {{ $t('GcmCmtyDivide.exportByGcmOwner') }}
        </el-button>
      </template>

      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--采购用的分类-->
            <el-col :span="6">
              <el-form-item :label="$t('GcmCmtyDivide.commodity')">
                <el-select
                  v-model="queryForm.commodity"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['commodity/getCommodityCollects']"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  >
                    <span style="float: left;">{{ item.name }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--GCM功能-->
            <el-col :span="6">
              <el-form-item :label="$t('GcmCmtyDivide.gcmFunction')">
                <el-select
                  v-model="queryForm.gcmFunction"
                  clearable
                  :placeholder="$t('select.placeholder')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <!--gcm负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('GcmCmtyDivide.gcmOwner')">
                <el-select
                  v-model="queryForm.gcmOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getGcmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--报价分工数据表格-->

    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--采购分类-->
        <el-table-column
          align="center"
          :label="$t('GcmCmtyDivide.commodity')"
          min-width="200px"
          prop="commodity"
          :sort-method="$sortByLower"
          sortable
        />

        <!--GCM功能列-->
        <el-table-column
          align="center"
          :label="$t('GcmCmtyDivide.gcmFunction')"
          min-width="100px"
          prop="gcmFunction"
          sortable
        />

        <!--GCM 负责人列-->
        <el-table-column
          align="center"
          :label="$t('GcmCmtyDivide.gcmOwner')"
          min-width="200px"
          sortable
        >
          <template slot-scope="scope">
            <span
              v-for="(item, index) in (scope.row.gcmOwners ? scope.row.gcmOwners : '').split(',')"
              :key="index"
            >
              {{
                index === 0
                  ? $store.getters['user/getUserNameById'](item)
                  : '|' + $store.getters['user/getUserNameById'](item)
              }}
            </span>
          </template>
        </el-table-column>
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="150px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('edit')"
              size="mini"
              type="text"
              @click="rowEdit(scope.$index, scope.row)"
            >
              <i class="el-icon-edit el-icon--right"></i>
              {{ $t('button.edit') }}
            </el-button>
            <el-button
              v-if="$hasPer('clear')"
              size="mini"
              type="text"
              @click="rowDelete(scope.$index, scope.row)"
            >
              <i class="el-icon-magic-stick el-icon--right"></i>
              {{ $t('button.clear') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--编辑对话框-->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('dialog.edit')"
      :visible.sync="editDialogVisible"
      width="35%"
    >
      <gcm-cmty-divide-edit
        :input-data="currentEditRow"
        @cancel="editDialogVisible = false"
        @save="afterEditSave"
      />
    </BaseDialog>
  </BaseWrap>
</template>

<script>
import GcmCmtyDivideEdit from './components/GcmCmtyDivideEdit'
// import { fileExport } from '@/api/quote/file'
import {
  gcmOwnerCommodityMpDelete,
  gcmOwnerCommodityMpExport,
  gcmOwnerCommodityMpMappingList
} from '@/api/quote/gcmOwner-cmty'
import { fileExportCommodityGcmOwner, fileExportGcmOwnerCommodity } from '@/api/quote/file-export'

export default {
  name: 'GcmCmtyDivide',
  components: { GcmCmtyDivideEdit },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        commodity: '',
        gcmFunction: '',
        gcmOwner: ''
      },
      // 编辑对话框可见标识
      editDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {}
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.$store.dispatch('commodity/initCommodityCollectsLazy')
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await gcmOwnerCommodityMpMappingList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 行记录编辑*/
    rowEdit(index, row) {
      this.currentEditRow = row
      this.editDialogVisible = true
    },
    /* 行记录删除 */
    async rowDelete(index, row) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        await gcmOwnerCommodityMpDelete(
          { commodity: row.commodity },
          { msgSuccess: true, msgError: true }
        )
        this.query()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改保存之后
    afterEditSave() {
      this.editDialogVisible = false
      this.query()
    },
    // 文件下载 （base64）
    async exportAll() {
      const res = await gcmOwnerCommodityMpExport({})
      this.$downFileByBase64(res, 'Hello')
    },
    async exportFileByCommodity() {
      try {
        this.isRequesting = true
        const res = await fileExportCommodityGcmOwner(
          {},
          { downExcelFile: true, msgSuccess: true, msgError: true }
        )
        await this.$downFile(res)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async exportFileByGcmOwner() {
      try {
        this.isRequesting = true
        const res = await fileExportGcmOwnerCommodity(
          {},
          { downExcelFile: true, msgSuccess: true, msgError: true }
        )
        await this.$downFile(res)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
